<template>
    <div class="content">
        <div class="warp">
            <el-container>
                <el-header height="60px" class="header">
                    <el-page-header @back="goBack" content="发布帖子">
                    </el-page-header>
                </el-header>
                <el-container>
                    <el-main height="">
                        <!-- Main content -->


                        <el-form :model="form" ref="form">
                            <el-form-item label="板块：" prop="sectionId" size="normal" required>
                                <el-select v-model="form.sectionId" placeholder="请选择板块">
                                    <el-option v-for="item in sectionList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>

                            </el-form-item>
                            <el-form-item label="标题：" prop="title" size="normal" required>
                                <el-input style="width: 80%;" v-model="form.title" placeholder="请输入标题"
                                    maxlength="40"></el-input>
                            </el-form-item>


                            <el-form-item prop="content" size="normal">
                                <TinymceEditor style="margin-left: 65px;" ref="tinymc" :value="form.content" @getImage="getImage"
                                    @input="newContent"></TinymceEditor>
                            </el-form-item>
                        </el-form>
                        <hr>
                        <div style="display: flex;justify-content: space-between;align-items: center">
                            <div>
                                <el-checkbox v-model="form.isShare" label="分享到动态"
                                    @change="form.isShare ? (form.dynamicTpye = 0) : (form.dynamicTpye = null)"></el-checkbox>
                                <el-radio-group v-if="form.isShare" v-model="form.dynamicTpye"
                                    style="margin-left: 20px;">
                                    <el-radio :label="0">公开</el-radio>
                                    <el-radio :label="1">仅互关</el-radio>
                                    <el-radio :label="2">仅自己</el-radio>
                                </el-radio-group>

                            </div>
                            <div style="margin-left: 20px;">
                                <el-button type="text" size="default">@用户</el-button>

                            </div>

                        </div>
                    </el-main>

                </el-container>
                <el-footer>
                    <!-- Footer content -->
                    <div style="display: flex;align-items: center;justify-content: center;flex-direction: column">
                        <el-button style="width: 120px;" type="primary" size="default" @click="submit">提交</el-button>

                    </div>
                </el-footer>

            </el-container>

        </div>
    </div>
</template>

<script>
import TinymceEditor from "@/components/TinyEditor"
import * as SectionAPI from '@/api/section/section'
import * as PostAPI from '@/api/post/post'
import tinymce from "tinymce";
export default {
    data() {
        return {
            form: {
                content: null,
                title: null,
                sectionId: -1,
                communityId: null,
                isShare: false,
                dynamicTpye: null
            },
            communityId: null,
            sectionList: [],
            taskOk: false,

        }
    },
    components: {
        TinymceEditor,
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        newContent(val) {

            this.form.content = val; // 直接更新 content 属性
        },
        getSectionList() {
            SectionAPI.getSectionList(this.communityId).then(res => {
                this.sectionList = res.data;
                this.sectionList.unshift({ id: -1, name: '无' })
            })
        },
        submit() {
            console.log(this.form);
            this.$refs.form.validate((valid, fields) => {
                if (valid) {
                    this.getImage();
                    PostAPI.addPost(this.form).then(res => {
                        this.$router.push('/community?id=' + this.communityId);
                        this.$message({
                            type: 'success',
                            message: res.msg
                        })
                    })
                    console.log("发送", this.form)
                    this.taskOk = false;
                }
            })

        },
        getImage() {//从tynimc文本区的dom中提取所有img标签的src值
            console.log(tinymce.activeEditor.getBody())
            let $ = tinymce.util.Tools.resolve('tinymce.dom.DomQuery');
            let bodydom = tinymce.activeEditor.getBody();
            let imgdomlist = bodydom.getElementsByTagName('img');
            console.log(imgdomlist)
            let srclist = []
            for (let i = 0; i < imgdomlist.length; i++) {
                srclist.push(imgdomlist[i].attributes.src.value);
                console.log(imgdomlist[i])
            }
            this.form.coverPic = srclist.toString();
        }
    },
    beforeRouteEnter(to, from, next) {
        if (!to.query.communityId) {
            alert('请到社区内发布帖子')
        } else {
            next();
        }

    },
    mounted() {

        this.communityId = this.$route.query.communityId;
        this.form.communityId = this.communityId;
        // console.log(this.form)
        this.getSectionList();
    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 1146px;
    margin: auto;
    // background-color: pink;
    position: relative;
    display: flex; //必要的，否则会导致.warp元素margin-top失效
    flex-direction: column;

}

.warp {
    margin-top: 20px;
    min-height: calc(100vh - 91px);
    background-color: white;

}

.header {
    // background-color: aqua;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #e4e6eb;
}
</style>